<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags"
	prefix="sec"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
  var sbase = '${sbase}';
  var base='${base}';
  var loginuser = '${loginUser.username}';
</script>
<link rel="stylesheet" type="text/css" href="${sbase}scripts/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="${sbase}scripts/bootstrap/css/bootstrap-responsive.css"/>   
<script type="text/javascript" src="${sbase}/scripts/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="${sbase}jqc/src/jquery.autocomplete.css">
<script type="text/javascript" src="${sbase}jqc/src/jquery.autocomplete.js"></script>
<title>Insert title here</title>
</head>
<body>
    <form id="iform">
    	
        
    </form>
    <INPUT id="e6"  type="text" />   
			
	<script type="text/javascript">
	 $("#e6").autocomplete({
	        url: 'product!searchall',
	        sortFunction: function(a, b, filter) {
	            var f = filter.toLowerCase();
	            var fl = f.length;
	            var a1 = a.value.toLowerCase().substring(0, fl) == f ? '0' : '1';
	            var a1 = a1 + String(a.data[0]).toLowerCase();
	            var b1 = b.value.toLowerCase().substring(0, fl) == f ? '0' : '1';
	            var b1 = b1 + String(b.data[0]).toLowerCase();
	            if (a1 > b1) {
	                return 1;
	            }
	            if (a1 < b1) {
	                return -1;
	            }
	            return 0;
	        },
	        showResult: function(value, data) {
	            return '<span style="color:red">' + value + '</span>';
	        },
	        onItemSelect: function(item) {
	            var text = 'You selected <b>' + item.name + '</b>';
	            if (item.data.length) {
	                text += ' <i>' + item.code.join(', ') + '</i>';
	            }
	            $("#last_selected").html(text);
	        },
	        minChars:3,
	        queryParamName:"term",
	        mustMatch: true,
	        maxItemsToShow: 5,
	        selectFirst: false,
	        autoFill: false,
	        selectOnly: true,
	        remoteDataType: 'json'
	    });

	</script>
  <div id="last_selected"></div>
</body>
</html>